<template>
  <!-- 公共样式部分 -->
  <div class="container">
    <div class="word">
      <el-form-item label="字体颜色：" prop="name" size="small"></el-form-item>
    </div>
    <ColorPicker @changeColor="changeTextColor"></ColorPicker>
  </div>
  <div class="container">
    <div class="word">
      <el-form-item label="字体大小" prop="name" size="small"></el-form-item>
    </div>
    <div class="input">
      <el-select
        class="m-2"
        v-model="modelItem.style.textFontSize"
        placeholder="Select"
      >
        <el-scrollbar height="25vh">
          <el-option
            v-for="item in fontSizeList"
            :key="item"
            :label="item"
            :value="item"
          />
        </el-scrollbar>
      </el-select>
    </div>
  </div>
  <div class="container">
    <div class="word">
      <el-form-item label="字体粗细:" prop="name" size="small"></el-form-item>
    </div>
    <div class="input">
      <el-select
        v-model="modelItem.style.textFontWeight"
        class="m-2"
        placeholder="500"
      >
        <el-scrollbar height="25vh">
          <el-option
            v-for="item in fontWeightList"
            :key="item"
            :label="item"
            :value="item"
          />
        </el-scrollbar>
      </el-select>
    </div>
  </div>
  <div class="container">
    <div class="word">
      <el-form-item
        label="模块上外边距:"
        prop="name"
        size="small"
      ></el-form-item>
    </div>
    <div class="input">
      <el-input-number
        v-model="mTop"
        :min="-100"
        :max="100"
        @change="handleChange"
      />
    </div>
  </div>
  <div class="container">
    <div class="word">
      <el-form-item
        label="模块下外边距:"
        prop="name"
        size="small"
      ></el-form-item>
    </div>
    <div class="input">
      <el-input-number
        v-model="mBottom"
        :min="-100"
        :max="100"
        @change="handleChangeMBottom"
      />
    </div>
  </div>
  <div class="container">
    <div class="word">
      <el-form-item
        label="模块上内边距:"
        prop="name"
        size="small"
      ></el-form-item>
    </div>
    <div class="input">
      <el-input-number
        v-model="pTop"
        :min="0"
        :max="100"
        @change="handleChangePTop"
      />
    </div>
  </div>
  <div class="container">
    <div class="word">
      <el-form-item
        label="模块下内边距:"
        prop="name"
        size="small"
      ></el-form-item>
    </div>
    <div class="input">
      <!-- 这里v-model只能绑定数字 数据给的是带有px -->
      <el-input-number
        v-model="pBottom"
        :min="0"
        :max="100"
        @change="handleChangePBottom"
      />
    </div>
  </div>
  <div class="container">
    <div class="word">
      <el-form-item
        label="模块左右内边距:"
        prop="name"
        size="small"
      ></el-form-item>
    </div>
    <div class="input">
      <el-input-number
        v-model="pLeftRight"
        :min="-100"
        :max="100"
        @change="handleChangePLeftRight"
      />
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, watch, defineProps, withDefaults } from 'vue'
import ColorPicker from '@/components/ColorPicker/ColorPicker.vue'
import { fontSizeList } from '@/hooks/useFontSizeList'
import { pxTonumber } from '@/util/common'
import { useResumeJsonStore } from '@/store/resume'
const fontWeightList = reactive<Array<number>>([
  100, 200, 300, 400, 500, 600, 700, 800, 900,
])
import selectModelItem from '@/hooks/selectModel.ts' //当前选中模块
const modelItem = selectModelItem()

let userResumeStore = useResumeJsonStore()
const changeTextColor = (value: string) => {
  userResumeStore.resumeJsonNewStore.COMPONENTS.forEach(
    (item) => (item.style.textColor = value),
  )
}
// 上外边距
const defaultMtop: number = pxTonumber(modelItem.style.mTop)
const mTop = ref<number>(defaultMtop)
const handleChange = (value: number): void => {
  modelItem.style.mTop = value + 'px'
}

// 下外边距
const defaultMbottom: number = pxTonumber(modelItem.style.mBottom)
const mBottom = ref<number>(defaultMbottom)
const handleChangeMBottom = (value: number): void => {
  modelItem.style.mBottom = value + 'px'
}

// 上内边距
const defaultPTop: number = pxTonumber(modelItem.style.pTop)
const pTop = ref<number>(defaultPTop)
const handleChangePTop = (value: number): void => {
  modelItem.style.pTop = value + 'px'
}

// 下内边距
const defaultPBottom: number = pxTonumber(modelItem.style.pBottom)
const pBottom = ref<number>(defaultPBottom)
const handleChangePBottom = (value: number): void => {
  modelItem.style.pBottom = value + 'px'
}

// 左右内边距
const defaultPLeftRight: number = pxTonumber(modelItem.style.pLeftRight)
const pLeftRight = ref<number>(defaultPLeftRight)
const handleChangePLeftRight = (value: number): void => {
  modelItem.style.pLeftRight = value + 'px'
}
</script>
<style lang="scss" scoped>
.container {
  padding: 20px 10px 0 10px;
  display: flex;

  .word {
    width: 40%;
  }

  .input {
    width: 60%;
  }

  .active {
    color: aquamarine;
  }
}
</style>
